<template>
  <micro-app
    v-if="isShowPage"
    class="micro-app"
    name="designer"
    :url="appUrlConfig.designer"
    baseroute="/designer"
    :data="designerData"
    router-mode="native"
    @mounted="microAppMounted"
    @error="onError"
  />
  <ErrorPage v-else :code="500"></ErrorPage>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { getToken } from "@/utils/auth";
import { useUserStore } from "@/stores";
import config from "@/config/setting.json";
import appUrlConfig from "@/config/appUrlconfig";
import { mainReceiveData } from "@/microApp/utils";
import ErrorPage from "@/views/error/components/ErrorPage.vue";
import { designerLogo } from "@/apis";
import webUrl from "@/assets/images/logo.png";
import { getLocalJsonCache } from "@/utils/cache";
// 是否是加盟商
const isChainTenant = ref(JSON.parse(localStorage.getItem("userinfo") as string).isChainTenant);
// 加盟商设置的logo icon titile
const logoIcon = getLocalJsonCache("logoIcon");
const userStore = useUserStore();
const designerData = ref({
  token: getToken(),
  userInfo: userStore.userInfo,
  roles: userStore.roles
});

const label = ref("");
mainReceiveData("designer", (data: any) => {
  label.value = data?.meta?.title ?? "";
});

const isLoading = ref(true);
const microAppMounted = () => {
  isLoading.value = false;
};

const isShowPage = ref(true);
const onError = () => {
  isShowPage.value = false;
};

const getDesignerLogo = async () => {
  const {
    data: { webName, logoUrl, iconUrl }
  } = await designerLogo();
  let favicon = document.querySelector('link[rel="icon"]') as any;
  favicon.href = isChainTenant.value && logoIcon.mallWebpageIconUrl ? logoIcon.mallWebpageIconUrl : iconUrl ? iconUrl : webUrl;
  document.title =
    isChainTenant.value && logoIcon.navigationBarName ? logoIcon.navigationBarName : webName ? webName : config.title;
};
onUnmounted(() => {
  let favicon = document.querySelector('link[rel="icon"]') as any;
  favicon.href = webUrl;
  document.title = config.title;
});
getDesignerLogo();
</script>

<style scoped lang="scss">
.micro-app,
:deep(micro-app-body) {
  height: 100%;
  overflow: auto;
}
</style>
